
<!-- 
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 -->

<template>
  <div id="app">
    <div id="app-l">
      <l_addStudent :student="student"></l_addStudent>
      <l_modifyStudent :student="student"></l_modifyStudent>
      <l_searchStudent></l_searchStudent>
     
    </div>

    <div id="app-r">
       <r_Student :student="student" @deleteSudent="deleteSudent"></r_Student>
    </div>
  </div>
</template>

<script>

import l_addStudent from "./components/l_addStudent.vue";
import l_modifyStudent from "./components/l_modifyStudent.vue";
import l_searchStudent from "./components/l_searchStudent.vue";
import r_Student from "./components/r_Student.vue";

export default {
  components: {
  
    l_addStudent,
    l_modifyStudent,
    l_searchStudent,
     r_Student
  },
  data(){
    return{
      student:[
        {
          id:1,
          name:"张三",
          age:"21",
          gender:"男"
        }
        ,
          {
          id:2,
          name:"李四",
          age:"19",
          gender:"女"
        }   ,
          {
          id:3,
          name:"王五",
          age:"20",
          gender:"男"
        } 

      ]
    }
  },
  methods:{
    deleteSudent(_id){
      this.student=this.student.filter(item=>
        item.id!=_id
      )
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#app {
  width: 100vw;
  height: 100vh;

  display: flex;
}
#app-l {
  width: 350px;
  background-color: #eee;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 15px;
  align-content:flex-start;
}
#app-r {

  flex: 1;
}
</style>
